<script setup>
import {ref} from 'vue';
import {reactive} from 'vue';
import {useRouter} from "vue-router";
import {ElMessage} from "element-plus";
import axios from 'axios';


document.title = "编辑资讯";

const router = useRouter();

const editData = reactive({
  aid : router.currentRoute.value.query.aid,
  title: '',
  content: '',
});

const getData = () => {
  axios({
    url: `http://1.116.198.235/article/api/zxnews.php?type=info&aid=` + editData.aid,
    headers: {
      'Content-Type': 'application/json',
      'Authorization': localStorage.getItem('userLoginToken'),
    },
  }).then((result) => {
    console.log(result.data.result.title)
    editData.title = result.data.result.title
    editData.content = result.data.result.content
  });
}
getData();
const setEdit = () => {
  console.log(editData.title)
  console.log(editData.content)
  console.log(editData.aid)

  axios({
    method: 'post',
    url: `http://1.116.198.235/article/api/zxnews.php?type=edit&aid=` + editData.aid,
    headers: {
      'Content-Type': 'application/json',
      'Authorization': localStorage.getItem('userLoginToken'),
    },
    data: {
      'title': editData.title,
      content: editData.content
    }
  }).then((res) => {
    console.log(res)
    if (res.data.code === "ok") {
      ElMessage.success("修改成功");
      router.push('/list')

    } else {
      ElMessage.error(res.data.msg);
    }
  });
};

</script>

<template>
  <div class="information">
    <img class="tuz" src="../../../public/images/兔子.png" alt="">
    <img class="cao" src="../../../public/images/草地.png" alt="">
    <div class="bg">
      <h3 class="h3">修改资讯</h3>
      <hr>
      <div class="publish">
        <br>
        <header><input v-model="editData.title" type="text" name="" id="title" placeholder="请输入标题"></header>
        <div class="new-body">
          <textarea v-model="editData.content" name="" id="textarea" cols="30" rows="10"
                    placeholder="请留下您的痕迹"></textarea>
          <div class="form-group">
            <div class="col-6">
              <button type="button" class="btn btn-info" @click="setEdit()">修改</button> &nbsp;
              <button type="button" class="btn btn-info" @click="$router.go('-1')">返回</button>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<style scoped>
.information {
  height: 100vh;
  background-size: 20%;
  position: relative;

}

.information > .tuz {
  position: absolute;
  top: 597px;
  left: 268px;
}

.information > .cao {
  position: absolute;
  top: 680px;
  width: 100%;
  height: 200px;
  z-index: 0;
}

.bg {
  margin: 20px auto;
  width: 750px;
}

.h3 {
  width: 120px;
  color: #1d6f5d;
  font-weight: 700;
  font-family: "Arial Narrow", serif;
  margin: 10px auto;
}

hr {
  width: 80%;
  margin: 0 auto;
  border: 1px solid #000000;
}

.publish {
  width: 675px;
  height: 484px;
  margin: 20px auto;
}

header {
  width: 100%;
  height: 55px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background-color: #799757;
}

header input {
  width: 80%;

  height: 35px;
  margin: 10px 10%;
  border: 1px solid black;
  border-radius: 5px;
}

.new-body {
  width: 673px;
}


#textarea {
  width: 675px;
  height: 400px;
  border: 0;
  background-size: 20%;
  background: linear-gradient(to bottom, #D6E9A9, rgba(255, 255, 255, 0.55)), url("public/images/小动物.png") no-repeat bottom;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.form-group-y {
  position: relative;
  width: 250px;
  margin: 16px 41px;
}

.yan {
  position: absolute;
  display: block;
  top: 30px;
  left: 270px;
}

.form-group {
  margin: 10px 40px;
}
</style>